CSS - Diferença entre hidden e none

A diferença entre visibility:hidden e display:none é bem sutil. No caso do display:none o elemento não é renderizado completamente mas no visibility:hidden o elemento é renderizado e seu espaço reservado fazendo com que mudando a visibilidade do elemento na página não mude o leioute da página.

CSS - visibility:hidden

Exemplo1 :
<div style="visibility:hidden;">Esta é a div1 e foi definida com o estilo visibility:hidden</div>


Como o browser Não exibe:


Entre no depurador do browser e você verá que a div1 foi enviada para o web browser que simplesmente não exibiu.
Note que o espaço do elemento no documento foi reservado.




CSS - display:none

Exemplo2 :
<div style="display:none">Esta é a div2 e foi definida com o estilo display:none</div>

Como o browser Não exibe:


Entre no depurador do browser e você verá que a div2 foi enviada para o web browser que simplesmente não exibiu.
Note que o espaço do elemento no documento NÃO foi reservado e cada vez que você exibe ou esconde o elemento o restante da página sofre deslocamento.




Importante : Sei que existe diferenças entre os dois quanto ao submit do form mas farei os testes quando o assunto for o elemento form.